<template>
  <!--  -->
  <basic-container>
    <el-form ref="form" size="mini" :model="form" label-width="90px" v-show="type!='view'">
      <el-row>
        <el-col :span="7">
          <el-form-item label="物料类型:" prop="materialType">
            <el-select clearable filterable placeholder="物料类型" @change="materialTypeChange" v-model="form.materialType">
              <el-option v-for="type in materialTypeList" :key="type.dictKey" :label="type.dictValue" :value="type.dictKey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="物料组:" prop="materialGroupNo">
            <el-select clearable filterable placeholder="物料组" @change="materialGroupNoChange" v-model="form.materialGroupNo">
              <el-option v-for="type in materialGroupList" :key="type.materialGroupNo" :label="type.materialGroupName" :value="type.materialGroupNo"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="物料:" prop="purchaseNo">
            <el-select clearable filterable placeholder="物料" @change="materialNoChange" v-model="form.materialNo">
              <el-option v-for="type in materialList" :key="type.materialNo" :label="type.materialName" :value="type.materialNo"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <div style="padding-left: 10px;">
            <el-button type="primary" @click="addMaterial">+</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <avue-crud :option="option" :data="data">
      <template slot="purchaseNum" slot-scope="{row}">
        <el-input :disabled="type=='view'" v-Int v-model="row.purchaseNum" maxlength="8"></el-input>
      </template>
      <template slot="planArrivalDate" slot-scope="{row}">
        <el-date-picker :disabled="type=='view'" v-model="row.planArrivalDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
      </template>
      <template slot="actualArrivalDate" slot-scope="{row}">
        <el-date-picker :disabled="type=='view'" v-model="row.actualArrivalDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
      </template>
      <template slot="actualNum" slot-scope="{row}">
        <el-input :disabled="type=='view'" v-Int v-model="row.actualNum" maxlength="8"></el-input>
      </template>
      <template slot-scope="{row}" slot="menu">
        <!-- <el-tooltip content="查看" style="height:auto" effect="dark" class="rightbtn" placement="bottom">
          <div class="top-bar__item">
            <el-button type="text" size="small" icon="el-icon-view" @click.stop="viewFn(row)"></el-button>
          </div>
        </el-tooltip> -->
        <!-- <el-tooltip content="编辑" style="height:auto" effect="dark" class="rightbtn" placement="bottom">
          <div class="top-bar__item">
            <el-button type="text" size="small" icon="el-icon-edit" @click.stop="editFn(row)"></el-button>
          </div>
        </el-tooltip> -->
        <el-tooltip content="删除" style="height:auto" effect="dark" class="rightbtn" placement="bottom">
          <div class="top-bar__item">
            <el-button type="text" size="small" icon="el-icon-delete" @click.stop="rowDel(row)"></el-button>
          </div>
        </el-tooltip>	  
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { init } from '@/mixins/init'
import {getTree, getMaterialgroupList,materialList} from '@/api/project/plan/equipmentPurchase.js'
export default {
  mixins: [init],
  props: {
    type: {
      type: String
    },
    data: {
      type: Object,
      default: () => {
        return []
      }
    }
  },
  name: '',
  data() {
    return {
      materialTypeList: [],
      materialGroupList: [],
      materialList: [],
      material: {},
      materialGroupName: '',
      form: {
        materialType: '',
        materialGroupNo: '',
        materialNo: ''
      },
      option: {
        tip: false,
        header: false,
        border: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        index: true,
        indexWidth: '44',
        menuWidth: 60,
        viewBtn:false,
        menu: true,
        column: [
          {
            label: '物料类型',
            prop: 'materialType',
            type: "select",
            dicData: [],
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
          },
          {
            label: '物料组',
            prop: 'materialGroupName',
          },
          { label: '物料编码', prop: 'materialNo' },
          { label: '物料名称', prop: 'materialName' },
          { label: '规格', prop: 'specifications' },
          { label: '型号', prop: 'model'},
          { label: '采购数量', prop: 'purchaseNum', slot: true },
          { label: '计划到货日期', prop: 'planArrivalDate', slot: true, width: 150 },
          { label: '实际到货日期', prop: 'actualArrivalDate', slot: true, width: 150},
          { label: '实际数量', prop: 'actualNum', slot: true },
        ]
      }
    }
  },
  created(){
    if (this.type == 'view') {
      this.option.menu = false
    } else {
      this.option.menu = true
    }
    getTree({code: 'materials', dictKey: 'E'}).then(res => {
      this.materialTypeList = res.data.data
      this.option.column[0].dicData = res.data.data
    })
  },
  methods: {
    materialTypeChange (val) {
      this.form.materialGroupNo = ''
      this.form.materialNo = ''
      this.materialGroupList = []
      this.materialList = []
      getMaterialgroupList({materialType: val}).then(res => {
        this.materialGroupList = res.data.data
      })
    },
    materialGroupNoChange (val) {
      this.form.materialNo = ''
      this.materialGroupName = this.materialGroupList.find(item => item.materialGroupNo == val).materialGroupName
      this.materialList = []
      materialList({materialType: this.form.materialType, materialGroupNo: val}).then(res => {
        this.materialList = res.data.data
      })
    },
    materialNoChange (val) {
      this.material = this.materialList.find(item => item.materialNo == val)
      console.log(this.material)
    },
    addMaterial () {
      if (!this.form.materialNo) {
        this.$message.warning('请选择物料')
        return
      }
      if (this.data.findIndex(item => item.materialNo == this.material.materialNo) > -1) {
        this.$message.warning('物料已添加，不可重复添加')
        return
      }
      this.data.push({
        materialFlag: 'E',
        executeType: '18',
        materialType: this.material.materialType,
        materialGroupNo: this.material.materialGroupNo,
        materialGroupName: this.materialGroupName,
        materialNo: this.material.materialNo,
        materialName: this.material.materialName,
        specifications: this.material.specifications,
        model: this.material.model,
        purchaseNum: '',
        planArrivalDate: '',
        actualArrivalDate: '',
        actualNum: '',
      })
    },
    rowDel (row) {
      this.$confirm('确认删除数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.data.splice(row.$index, 1)
      }).catch(() => {})
    },
    
  },
  destroyed(){}
};
</script>

<style scoped lang="scss">

</style>
